﻿<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat,java.util.Calendar"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	Calendar cal = Calendar.getInstance();
	Calendar cal2 = Calendar.getInstance();
	cal.set(Calendar.DAY_OF_MONTH,31);
	cal2.set(Calendar.DAY_OF_MONTH,1);
	SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
	String today = format.format(cal.getTime());
	String oneday = format.format(cal2.getTime());
%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<META http-equiv=Content-Type content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link type="text/css" rel="stylesheet" href="include/css/welcome.css" />
		<link type="text/css" rel="stylesheet" href="include/css/css.css" />
		<link type="text/css" rel="stylesheet" href="include/css/bootstrap.css" />
		<link type="text/css" rel="stylesheet" href="include/css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" href="include/jqgrid/css/ui.jqgrid.css" type="text/css"/>
		<link type="text/css" rel="stylesheet" href="include/iconFont/1.0.8/iconfont.css"/ >
		<link type="text/css" rel="stylesheet" href="include/layer/skin/default/layer.css"/>
		<link rel="stylesheet" href="include/css/H-ui.css" type="text/css"/>
		<link rel="stylesheet" href="include/css/H-ui.admin.css" type="text/css"/>
		<link rel="stylesheet" href="include/icheck/icheck.css" type="text/css"/>
		<link rel="stylesheet" href="include/jqgrid/css/css/gray1/jquery-ui.css" type="text/css"/>
	</head>
	<script type="text/javascript">
		window.onload=function(){
			
			$('.form_datetime').datetimepicker({
		        format: 'yyyy-mm-dd',
		        language: 'zh-CN',
		        pickDate: false,
		        pickTime: false,
		        hourStep: 1,
		        minuteStep: 15,
		        secondStep: 30,
		        autoclose: true,
		        pickerPosition:'bottom-left',
		        inputMask: true,
		        startView: 'year',
		        minView:'month'
		    });
			
			getAccountStates();
			getAccountInit();
			
		}
		
		function getAccountStates()
		{
			var ddl = $("#accounttype");
            $.ajax({
				type: "POST",
				data:{"statusType":"ACCOUNTTYPE","totalflag":"total"},
				url: "JqueryAction/getSetupState.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
					for(var i=0;i<datas.length;i++)
					{
						ddl.append("<option value="+datas[i].statusValue+">"+datas[i].statusName+"</option>");
					}
				}
			});
		}
			function getAccountInit()
			{
				var accounttype = $("#accounttype")[0].value;
				var accountstate = $("#accountstate")[0].value;
				var startnum = $("#startnum").val();
				var endtnum = $("#endnum").val();
				var begintime = $("#begintime").val();
				var endtime = $("#endtime").val();
				
				$("#usertable").jqGrid({
				   	url:'AccountAction/getAccountInfo.action',
				   	postData:{accounttype:accounttype,accountstate:accountstate,
								startnum:startnum,endtnum:endtnum,
								begintime:begintime,endtime:endtime},
					datatype: "json",
					mtype:'post',
					loadComplete: function() {  
				        var grid = $("#usertable");  
				        var ids = grid.getDataIDs();  
				        for (var i = 0; i < ids.length; i++) {  
				            grid.setRowData ( ids[i], false, {height: 30});  
				        }  
				    },  
				   	colNames:['账目类型', '账目金额（元）', '发生时间','结算状态','收支状态','备注','操作'],
				   	colModel:[
				   		{name:'accountTypeName',index:'accountTypeName', width:90, align:"center"},
				   		{name:'accountSale', index:'accountSale', width:70, align:"center"},
				   		{name:'accountTime',index:'accountTime', width:100, align:"center",formatter:"date",formatoptions: {srcformat:'U',newformat:'Y-m-d H:i'}},
				   		{name:'isBalance', index:'isBalance', align:"center", sortable:true, width:70, formatter:balanceFormatter,title:false},
				   		{name:'accountSale',index:'accountSale', align:"center", sortable:true, width:50, title:false, formatter:payFormatter},
				   		{name:'remark',index:'remark', align: "left", title:true,sortable: true, editable: false, formatter:kongFormatter},
				   		{name:'isBalance',index:'isBalance', align:"center", sortable:false, width:50, title:false, formatter:actFormatter}
				   	],
				   	rowNum:11,
				   	rownumbers: true,
	   				rownumWidth: 35,
				   	height:331,
				   	width:1078,
				   	rowList:[11,25,50],
				   	pager: '#pager1',
				   	sortname: 'id',
				   	scrollOffset:2,
				   	loadonce: true,
				   	//caption: "用户列表",
				    viewrecords: true,
				    sortorder: "desc"
				});
	            jQuery("#usertable").jqGrid('navGrid', "#pager1", {edit:false, add:false,del:false,search:false,refresh:false});
			}
			
			function changeicon()
			{
				if(!$("#icon1").is(":hidden"))
				{
					$("#icon2").show(); 
					$("#icon1").hide();
				}
				else
				{
					$("#icon2").hide(); 
					$("#icon1").show();
				}
			}
			
			function kongFormatter(value){
				var aa = '--';
				if(null == value || '' == value)
				{
					return aa;
				}
				else
				{
					return value;
				}
		    }
		    
		    function balanceFormatter(cellvalue, options, rawObject)
	    	{
		    	if(cellvalue == 1)
		    	{
		    		var istate = '<span class="label label-success radius">已结算</span>';
		    	}
		    	else if(cellvalue == 0)
		    	{
		    		var istate = '<span class="label label-danger radius">未结算</span>';
		    	}
		    	else if(cellvalue == 10)
		    	{
		    		var istate = '<span class="label label-warning radius">不计入结算</span>';
		    	}
		    	
		    	return istate;
	    	}
		    
		    function payFormatter(cellvalue, options, rawObject)
	    	{
		    	if(cellvalue >0)
		    	{
		    		var istate = '<span class="label label-success radius">收入</span>';
		    	}
		    	else if(cellvalue < 0)
		    	{
		    		var istate = '<span class="label label-danger radius">支出</span>';
		    	}
		    	else if(cellvalue == 0)
		    	{
		    		var istate = '<span class="label label-default radius">无效</span>';
		    	}
		    	
		    	return istate;
	    	}
		    
		    // 自定义操作列
			function actFormatter(cellvalue, options, rawObject) 
		    {
			    // 显示删除,变更为成功结单按钮
	    		var delcard = '<button style="height:24px;" type="button" class="btn btn-danger btn-xs" ' +
	    		'			onclick="delAccounts('+options.rowId+')"><i class="Hui-iconfont">&#xe609;</i> 删 除</button>';
				
		    	if(cellvalue == 0 || cellvalue == 10)
		    	{
					return "&nbsp;" + delcard;
		    	}
		    	else if(cellvalue == 1)
		    	{
					return "--" ;
		    	}
			}
		    
		    function delAccounts(accountId)
		    {
		    	layer.confirm('您确定作废此账目吗？', {
				  btn: ['确定作废','取消操作'],skin: 'layui-layer-lan'
				}, function(){
					$.ajax({
					type: "POST",
					url: "AccountAction/deleteAccountInfo.action",
					dataType: "json",
					data:{"id":accountId},
					success: function(res)
					{
						if(res.result)
						{
							layer.msg('账目作废成功！', {icon: 1});
							
							$("#usertable").jqGrid('setGridParam', {
								datatype:'json',
								page : 1
							}).trigger("reloadGrid");
						}
						else
						{
							layer.msg('账目作废失败，请联系作者！', {icon: 2});
						}
					}
				});
				}, function(){
				  layer.msg('已取消操作', {icon: 2});
				});
		    }
		    
			// 查询（重载）
			function tijiao(){
				var accounttype = $("#accounttype")[0].value;
				var accountstate = $("#accountstate")[0].value;
				var startnum = $("#startnum").val();
				var endtnum = $("#endnum").val();
				var begintime = $("#begintime").val();
				var endtime = $("#endtime").val();
				var dbegintime = Date.parse($("#begintime").val().replace(/-/g,"/"));
				var dendtime = Date.parse($("#endtime").val().replace(/-/g,"/"));
				
				if(dbegintime > dendtime)
				{
					layer.tips('起始时间不得大于结束时间', '#begintime', {
					tips: [3, 'gray']
					});
					return;
				}
				
				if(isNaN(startnum))
				{
					layer.tips('金额必须为数字', '#startnum', {
					tips: [3, 'gray']
					});
					return;
				}
				
				if(isNaN(endtnum))
				{
					layer.tips('金额必须为数字', '#endnum', {
					tips: [3, 'gray']
					});
					return;
				}
				
				$("#usertable").jqGrid('setGridParam', {
					datatype:'json',
				   postData:{accounttype:accounttype,accountstate:accountstate,
								startnum:startnum,endtnum:endtnum,
								begintime:begintime,endtime:endtime},
					loadComplete: function() {  
				        var grid = $("#usertable");  
				        var ids = grid.getDataIDs();  
				        for (var i = 0; i < ids.length; i++) {  
				            grid.setRowData ( ids[i], false, {height: 30});  
				        }  
				    }, 
					page : 1
				}).trigger("reloadGrid");
			}
			
			function excleto(){
				var accounttype = $("#accounttype")[0].value;
				var accountstate = $("#accountstate")[0].value;
				var startnum = $("#startnum").val();
				var endtnum = $("#endnum").val();
				var begintime = $("#begintime").val();
				var endtime = $("#endtime").val();
				var dbegintime = Date.parse($("#begintime").val().replace(/-/g,"/"));
				var dendtime = Date.parse($("#endtime").val().replace(/-/g,"/"));
				
				if(dbegintime > dendtime)
				{
					layer.tips('起始时间不得大于结束时间', '#begintime', {
					tips: [3, 'gray']
					});
					return;
				}
				
				if(isNaN(startnum))
				{
					layer.tips('金额必须为数字', '#startnum', {
					tips: [3, 'gray']
					});
					return;
				}
				
				if(isNaN(endtnum))
				{
					layer.tips('金额必须为数字', '#endnum', {
					tips: [3, 'gray']
					});
					return;
				}
				
				location.href = "AccountAction/getAccountExcle.action?accounttype="+accounttype+"&accountstate="+accountstate+
				                "&startnum="+startnum+"&endtnum="+endtnum+"&begintime="+begintime+"&endtime="+endtime;
			}
	</script>
	<body>
		<div class="panel-body" style="padding-bottom:0px;text-align: right;margin-top: -5px;">
		
		<div class="panel panel-primary" style="margin-top: 1px">
		<div class="panel-heading" style="text-align: left;">查找条件
				<a style="line-height: 1.6em;float: right;text-decoration:none;margin-right: -8px" 
					data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseOne" title="收起" onclick="changeicon();">
				   <i id="icon1" class="Hui-iconfont" style="color:white;display: block;">&#xe6d6;</i>
				   <i id="icon2" class="Hui-iconfont" style="color: white;display: none;">&#xe6d5;</i>
				</a>
				<a href="javascript:;" onclick="excleto();"  style="line-height: 1.5em;height: 30px;float: right;margin-right: 10px;margin-top: -4px"
				class="btn btn-primary radius"><i class="Hui-iconfont">&#xe644;</i> 导出报表</a>&nbsp;&nbsp;
				<a href="javascript:;" id="queryUser" style="line-height: 1.5em;height: 30px;float: right;margin-right: 10px;margin-top: -4px"
				class="btn btn-success radius" onclick="tijiao();"><i class="Hui-iconfont">&#xe665;</i>
				点我查询&nbsp;</a>
				
		</div>
		<div id="collapseOne" class="panel-collapse collapse in">
		<div class="panel-body2">
			<div class="text-l">
			<p style="margin-top: 5px;">
				<span>
					<font style="font-size: 12px;text-align: left;color: gray;"><b>账目类型：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="accounttype" name="accounttype" class="select" style="width: 110px" onclick="getProducts();">
					</select> 
				</span>
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>结算状态：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="accountstate" name="accountstate" class="select" style="width: 90px">
						<option value="">全部</option>
						<option value="0">未结算</option>
						<option value="1">已结算</option>
						<option value="10">不计入结算</option>
					</select> 
				</span> 
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>金额范围：</b></font>
					<input type="text" name="startnum" id="startnum"
							 class="input-text inline radius" style="width: 57px"> &nbsp;~&nbsp;
					 <input type="text" name="endnum" id="endnum"
							 class="input-text inline radius" style="width: 57px">
				</span>
				<span style="padding-left: 15px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>记账时间：</b></font>
				</span>
				<span class="select-box inline radius" style="width: 158px;"> 
					<input size="16" style="width: 145px;height: 25px;" type="text" value="<%=oneday %>" readonly class="form_datetime form-control" id="begintime" name="begintime"/>
				</span>
				&nbsp;至&nbsp;
				<span class="select-box inline radius" style="width: 158px;"> 
					<input size="16" style="width: 145px;height: 25px;" type="text" value="<%=today %>" readonly class="form_datetime form-control" id="endtime" name="endtime"/>
				</span>
				</p>
			</div>
			</div>
			</div>
			</div>
			</div>
			<div style="margin-left:15px;margin-top: -10px;">
				<table id="usertable"></table>
				<div id="pager1"></div>
			</div>
		<script type="text/javascript" src="include/js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="include/jqgrid/js/jquery.jqGrid.src.js"></script>
		<script type="text/javascript" src="include/jqgrid/js/i18n/grid.locale-cn.js"></script>
		<script type="text/javascript" src="include/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="include/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript" src="include/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		<script type="text/javascript" src="include/layer/layer.js"></script>
		<script type="text/javascript" src="include/js/H-ui.js"></script>
		<script type="text/javascript" src="include/js/H-ui.admin.js"></script>
	</body>
</html>